import { Ref, ref, unref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { AppTab } from '../types';
import { useGo } from './usePages';

export function useAppTabs() {
  const appTabsPanes: AppTab[] = [
    { title: '首页', url: '/home' },
    { title: '关于', url: '/about' },
    { title: '创建', url: '/create' },
    { title: '我的', url: '/my' },
  ];
  const appTabsActiveKey = ref(0);
  const appTabsActiveTitle = computed(() => {
    return appTabsPanes[appTabsActiveKey.value].title;
  });
  const go = useGo();
  function handleChangeKey(key: number) {
    appTabsActiveKey.value = key;
    go(appTabsPanes[key].url);
  }
  const { path } = useRoute();
  // if (
  //   appTabsPanes
  //     .map((item) => {
  //       return item.url;
  //     })
  //     .indexOf(path)
  // ) {
  //   const isUrl = appTabsPanes
  //     .map((item) => {
  //       return item.url;
  //     })
  //     .indexOf(path);
  //   appTabsActiveKey.value = isUrl || 0;
  // }

  return {
    appTabsPanes,
    appTabsActiveKey,
    appTabsActiveTitle,
    handleChangeKey,
  };
}
